<template lang="pug">
  .page
    .AccountsReceivableManage
      .form-shebao-title.font-16.font-weight 年审调基记录明细
      .pl-20.pr-20.bg-white
        Table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10(v-if="hasExportDetail" type="info" @click="handleExport") 导出
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
</template>

<script>
import { Common } from '@/utils/common.js'
import { YearReviewBaseAmountDetailApi } from '@/api/YearReviewBaseAmountDetail.api.js'
import { adjustBaseRecordDetailThead } from '../tableHead.js'
import _cloneDeep from 'clone-deep'

export default {
  name: '', // 年审记录明细

  components: {
  },

  data () {
    return {
      thead: _cloneDeep(adjustBaseRecordDetailThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      arrListDown: {
        type: []
      }
    }
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 明细导出
    hasExportDetail () {
      return this.actionArr.indexOf('ExportDetail') > -1
    }
  },

  mounted () {
    this.query()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        ParentId: '',
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await YearReviewBaseAmountDetailApi.getList(params)
      console.log('获取列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 导出
    handleExport () {
      console.log('导出~')
      var params = {
        YearReviewId: this.id
      }
      // let res = await YearReviewBaseAmountDetailApi.export(params)
      YearReviewBaseAmountDetailApi.export(params).then(res => {
        let fileName = '年审记录明细.xls'
        let blob = new Blob([res.data], { type: 'application/octet-stream' })
        if ('download' in document.createElement('a')) {
          let objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.download = fileName
          link.href = objectUrl
          link.click()
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
        this.searchFn()
      })
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
